<template>
  <div>
    <div class="bg">
      <div class="title">标签-{{name}}</div>
    </div>
    <div class="main">
      <div class="card" v-for="(item,i) in list" :key="i">
        <div class="top">
          <img :src="item.cover" alt="">
        </div>
        <div class="bottom">
          <router-link class="title" :to="'/article/'+item.id">{{item.title}}</router-link>
          <div class="box">
            <div class="time">{{dateFormat(item.publishDate, "yyyy-mm-dd")}}</div>
            <div class="tag"><i class="iconfont icon-biaoqian1"></i> {{name}}</div>
          </div>
        </div>
      </div>
      <el-card class="card" v-if="total > 10">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="10"
          @current-change="handleCurrentChange"
          :current-page="page"
        >
        </el-pagination>
      </el-card>
    </div>
  </div>
</template>

<script>
import dateFormat from "dateformat";
import { mapState } from "vuex";
import { getArticleByTag } from "@/api";
export default {
  data() {
    return {
      list: [],
      page:1,
      total:0
      // name:''
    };
  },
  methods: {
    async getdata() {
     const data =  await getArticleByTag(this.$route.query.tag,this.page)
      this.list = data.list
      this.total = data.total
      // this.name = this.$route.query.tag

    },
    dateFormat,
    handleCurrentChange(page){
      this.page = page;
      this.getdata()
    }
  },
  created() {
    this.getdata();
  },
  computed:{
    ...mapState({
      tags:state => state.tags
    }),
    name(){
      if (this.tags.length>0){
        let name = this.tags.filter(item=>item.id == this.$route.query.tag)[0].name
        document.title = '标签-'+name
        return name;
      }else{
        return null;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../assets/css/base.scss";
.bg {
  @include bg("/image/wallhaven.jpg");
  .title {
    font-size: 40px;
    font-weight: 900;
  }
}
.main {
  max-width: 1130px;
  min-height: calc(50vh - 10vh - 20px - 30px );
  margin: 0 auto;
  padding-top: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(360px,1fr));
  grid-gap: 10px;
  .card{
    width: 100%;
    .top{
      width: 100%;
      height: 220px;
      overflow: hidden;
      img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        border-radius: var(--radius) var(--radius) 0 0;
         transition: transform 1s;
        &:hover{
          transform: scale(1.25);
        }
      }
    }
    .bottom{
      padding: 15px;
      a{
        display: block;
      }
      .title{
        font-size: 15px;
      }
      .box{
        margin-top: 5px;
        display: flex;
        justify-content: space-between;
      }
    }
  }
}
@media screen and (max-width: 768px) {
  .title {
    font-size: 5vw !important;
  }
}
</style>